<template>
    <div>
        <!-- 微信信息弹窗 -->
		<div 
		v-show="showWindow === 'wechatInfoWindow' && overlayShow" 
		id="wechat-info" 
		class="center-hint">
			<van-icon @click="hideOverlay" class="wechat-info-close-icon" name="cross" />
			<div class="center-hint-content">
				<div id="wechat-no-info">
					<span>微信:</span>
					<span id="wechat-no">{{userWechatInfo.UserWx}}</span>
					<span id="copy-user-wechat-no" 
					v-clipboard:copy="userWechatInfo.UserWx" 
					v-clipboard:success="onSuccCopyWechatNo" 
					v-clipboard:error="onErrorCopyWechatNo">
					{{copyWechatNoText}}</span>
				</div>
				<div id="wechat-remarks">{{userWechatInfo.Description}}</div>
				<div 
				v-if="userWechatInfo.WxScan && typeof userWechatInfo.WxScan === 'string' && userWechatInfo.WxScan.trim().length" 
				class="wechat-qrcode-par">
					<img id="wechat-qrcode" :src="userWechatInfo.WxScan">
					<div class="wechat-qrcode-explain">长按识别加微信好友</div> 
				</div>
			</div>
            <a class="close-window" @click="hideOverlay">关闭当前弹窗</a>
		</div>

        <!-- 积分支付，确定查看微信弹窗 -->
		<div 
		v-show="showWindow === 'needIntegralPayHint' && overlayShow"
		id="need-integral-pay-hint" 
		class="hint-one">
			<div class="hint-one-text-div">
				<!-- <div>当天免费查看次数已用完,继续查看需支付<span id="need-integral-pay-count">{{userIndexInfo.ViewFreeWxPay || 0}}</span>积分</div> -->
                <div>您已用完当天免费查看次数(每天{{(userIndexInfo.LoginBindWx ? userIndexInfo.MaxViewFreeWx * 4 : userIndexInfo.MaxViewFreeWx) || 0}}次)!</div>
                <div>如需继续查看请支付{{userIndexInfo.ViewFreeWxPay || 0}}积分，确定查看?</div>
			</div>
			<div class="hint-one-btn-div">
				<a @click="hideOverlay" class="hint-one-btn hint-one-btn-close">取消</a>
				<a @click="integralPayBrowseWechat" id="sure-browse-wechat" class="hint-one-btn hint-one-btn-sure">确定查看</a>
			</div>
		</div>

        <!-- 绑定微信弹窗 -->
        <bind-wechat-window 
        :message="bindWechat.message"
        :isShow="showWindow === 'bindWechat'"
        @closeBindWechatWindow="closeBindWechatWindow"
        />

        <!-- 未设置业务名片弹窗 -->
		<need-set-bus-window
		:textOne="needSetBus.message"
		:textSecond="needSetBus.messageTwo"
		:closeBtnText="needSetBus.closeBtnText"
		:sureBtnText="needSetBus.sureBtnText"
		:isShow="showWindow === 'needSetBus'"
		:overlayShow="overlayShow"
		@hideOverlay="hideOverlay"
		/>

        <!-- 设置支付密码弹窗 -->
        <need-set-pay-pwd :isShow="showWindow === 'needSetPayPwd'" @closeNeedSetPayPwdWindow="closeNeedSetPayPwdWindow" />

		<van-overlay :show="overlayShow" @click="hideOverlay" />
    </div>
</template>

<script>
// 自定义方法
import { getUserIndex, checkWechatInfo, getPayConfig, isLogined } from '_network/request'
import { failTextVantToa, loadingVantToa, clearVantToa } from "_projectFn/prompt"
import { getCookie } from '_commonFn/cookie.js'
import { isLoginChose } from '_projectFn/login'

// 自定义组件
import NeedSetBusWindow from "_components/project/ShowWindow/NeedSetBusWindow" // 设置业务名片弹窗
import NeedSetPayPwd from "_components/project/ShowWindow/NeedSetPayPwd" // 设置支付密码弹窗
import BindWechatWindow from "_components/project/ShowWindow/BindWechatWindow" // 绑定微信弹窗

// UI组件
import { Overlay, Icon } from "vant"

import VueClipboard from 'vue-clipboard2'

// Vue全家桶
import Vue from 'vue'

Vue.use(Overlay).use(VueClipboard)

export default {
    name: 'ShowUserWechatInfo',
    props: {
        userId: {
            default: ''
        }
    },
    data() {
        return {
            checkWechatInfo: {
                isChecktWechatInfo: 0,
            },
            userIndexInfo: {},
            userWechatInfo: {},
            showWindow: '',
            overlayShow: false,
            copyWechatNoText: '复制',
            bindWechat: {
                message: '30秒绑定微信，查看更多!\n同时为您开通微信群业务信息权限!'
            },
            needSetBus: {
                message: '1分钟创建业务名片，查看更多！',
                messageTwo: '同时为您开通社群业务信息展示权限！',
                closeBtnText: '关闭',
                sureBtnText: '创建业务名片',
            },
        }
    },
    methods: {
		// 复制微信号成功
		onSuccCopyWechatNo() {
			this.copyWechatNoText = '已复制'
		},
		// 复制微信号失败
		onErrorCopyWechatNo() {
			this.copyWechatNoText = '复制失败'
		},
        hideOverlay() {
            this.showWindow = ''
            this.overlayShow = false
        },
        showOverlay() {
            this.overlayShow = true
        },
        // 显示设置支付密码弹窗
        showNoSetPwd() {
            this.showWindow = 'needSetPayPwd'
        },
        // 显示设置业务名片弹窗
        showNotSetBusInfo(text) {
            if (text) {
                this.needSetBus.message = text
            }
            this.showWindow = 'needSetBus'
            this.showOverlay()
        },
        // 显示绑定微信弹窗
        showBindWechat() {
            this.showWindow = 'bindWechat'
            this.showOverlay()
        },
        // 关闭微信弹窗
        closeBindWechatWindow() {
            this.closeNeedSetPayPwdWindow()
        },
		// 显示需要积分支付弹窗
		showNeedIntegralPay() {
			this.showWindow = 'needIntegralPayHint'
			this.overlayShow = true
        },
        // 显示微信信息弹窗
        showUserWechatInfo() {
			this.showWindow = 'wechatInfoWindow'
			this.overlayShow = true
        },
        closeNeedSetPayPwdWindow() {
            this.showWindow = ''
			this.overlayShow = false
        },
        checktWechatInfo() {
            const that = this
            loadingVantToa({})
            isLogined({
                callback(isLog) {
                    clearVantToa()
                    if (isLog) {
                        if (that.checkWechatInfo.isChecktWechatInfo) {
                            that.showUserWechatInfo() // 显示查看微信弹窗
                        } else if (that.userId) {
                            that.getUserIndexInfo((data) => {
                                // console.log('data', data)
                                that.userIndexInfo = data
                                if (data.IsViewWechat == 0) { // 未受限
                                    if (data.MaxViewFreeWx > data.ViewFreeWx || data.UserItem.UserId == getCookie('UserId') || data.IsPayViewWx) { // 在免费查看次数内
                                        that.freeBrowseWechat() // 免费查看微信
                                    } else {
                                        if (data.IsUserBusiness) { // 已填写业务名片
                                            if (data.MaxViewFreeWx * 2 > data.ViewFreeWx ) {
                                                that.freeBrowseWechat() // 免费查看微信
                                            } else {
                                                if (data.LoginBindWx) { // 如果已绑定微信
                                                    if (data.MaxViewFreeWx * 4 > data.ViewFreeWx ) {
                                                        that.freeBrowseWechat() // 免费查看微信
                                                    } else {
                                                        that.showNeedIntegralPay() // 显示确定是否积分支付
                                                    }
                                                } else { // 显示绑定微信弹窗
                                                    that.showBindWechat()
                                                }
                                            }
                                        } else { // 显示未设置业务名片
                                            that.showNotSetBusInfo('请1分钟设置[业务名片],即可查看微信！')
                                        }
                                    }
                                } else { // 显示已受限
                                    failTextVantToa(`您受限中！无法查看更多！`)
                                }
                            })
                        }
                    } else {
                        isLoginChose('')
                    }
                }
            })
        },
		// 点击确定积分支付查看微信
		integralPayBrowseWechat() {
			if (isLoginChose()) {
				const that = this
				getPayConfig({
					callback(data) {
						console.log('获取支付基本信息 data', data)
						that.hideOverlay()
						if (that.userIndexInfo.ViewFreeWxPay <= data.Freesecret) { // 如果在免密支付范围
							that.freeBrowseWechat() // 执行免密支付
						} else {
							if (data.IsPayPwd) { // 如果设置了支付密码
								// 隐藏弹窗
								that.hideOverlay()
								// 显示密码支付
								that.$router.push({
									path: 'Pay',
									name: 'Pay',
									query: {
										type: 'UserIndexBrowseWechat',
										page: 'UserIndex',
										no1: that.userId
									}
								})
							} else {
								that.showNoSetPwd()
							}
						}
					}
				})
			}
        },
        // 免费、免密查看微信
		freeBrowseWechat() { 
            loadingVantToa({})
            checkWechatInfo({UserId: this.userId})
            .then(res => {
                console.log('免密支付查看微信 res：', res)
                if (res.errcode == 0) {
					clearVantToa()
					this.userWechatInfo = Object.assign({}, res.data)
					this.checkWechatInfo.isChecktWechatInfo = 1
                    this.showUserWechatInfo(res.data) // 显示微信信息
                } else {
                    if (res.errcode == 1002) {
					    clearVantToa()
                        this.showNotSetBusInfo('请1分钟设置[业务名片],即可查看微信！')
                    } else {
                        failTextVantToa(res.message)
                    }
                }
            }, res => {
                console.log('fail: res', res)
                if (res.errcode != 2000) {
                    failTextVantToa('服务器正在修整')
                }
            })
            .catch(res => {
                console.log('catch：res', res)
                failTextVantToa('服务器正在修整，请稍后')
            })
		},
        getUserIndexInfo(callback) {
            if (typeof callback === 'function') {
                loadingVantToa({})
                getUserIndex(this.userId)
                .then(res => {
					console.log("获取用户的主页信息 res：", res)
					if (res.errcode == 0) {
                        clearVantToa()
                        this.userIndexInfo = res.data
						typeof callback === 'function' && callback(this.userIndexInfo)
					} else {
						failTextVantToa(res.message)
					}
				}, res => {
					console.log("fail: res", res)
					if (res.errcode != 2000) {
						failTextVantToa("服务器正在修整，请稍后")
					}
				})
				.catch(res => {
					console.log("catch：res", res)
					failTextVantToa("服务器正在修整，请稍后")
				})
            }
        },
        successSet(data) {
            this.checkWechatInfo.isChecktWechatInfo = 1
            this.userWechatInfo = Object.assign({}, data)
			this.showUserWechatInfo() // 显示微信信息
        },
		clearPageStatus() {
			this.overlayShow = false
			this.showWindow = ''
		},
    },
    activated() {
        // this.clearPageStatus()
        let successEvent = sessionStorage.getItem('successEvent')
		if (successEvent) {
			successEvent = JSON.parse(successEvent)
            sessionStorage.removeItem('successEvent')
            this.successSet(successEvent.data)
		} else {
            this.checkWechatInfo.isChecktWechatInfo = 0
        }
    },
    deactivated() {
        this.clearPageStatus()
    },
    components: {
        BindWechatWindow,
        NeedSetPayPwd,
        NeedSetBusWindow,
    }
}
</script>

<style lang="scss" scoped>
// 通用弹窗1
.hint-one {
    width: 290px;
    height: 170px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -145px;
    margin-top: -85px;
    z-index: 2;
    background: white;
    border-radius: 5px;
    overflow: hidden;

    .hint-one-text-div {
        height: 130px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        border-bottom: 1px solid #eeeeee;
        padding: 15px;
        flex-direction: column;
    }
    
    .hint-one-btn-div {
        height: 40px;
        width: 100%;
        display: flex;
    
        .hint-one-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
        }
        
        .hint-one-btn-close {
            color: #999999;
            width: 90px;
        }
        
        .hint-one-btn-sure {
            background: #0077bf;
            color: white;
            width: 200px;
        }
    }
}
// 通用弹窗1结束

// 通用上下左右居中弹窗1
.center-hint {
    width: 290px;
    min-height: 100px;
    background: white;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -145px;
    z-index: 2;
    border-radius: 5px;
    transform: translateY(-50%);
    border-radius: 5px;
    overflow: hidden;
    
    .center-hint-content {
        min-height: 70px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 15px;
        border-bottom: 1px solid #eeeeee;
    }

    .center-hint-btns {
        height: 30px;
        line-height: 30px;
        display: flex;
        align-items: center;

        .center-hint-btn {
            color: #999999;
        }

        .center-hint-fill {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }

    .close-window {
        display: flex;
        height: 45px;
        justify-content: center;
        align-items: center;
        border-top: 1px solid #fdf5f5;
        color: #999999;
    }
}
// 通用上下左右居中弹窗1结束

// 微信信息弹窗
#wechat-info {
    width: 300px;
    min-height: 80px;
    overflow: hidden;

    .wechat-info-close-icon {
        position: absolute;
        top: 4px;
        right: 4px;
        color: #999999;
    }

    .center-hint-content {
        background: white;
        border-bottom: 0px;
    }
    
    .center-hint-btns {
        height: 45px;
        font-size: 14px;
    }
    
    .center-hint-btn {
        color: #999999 !important;
    }
    
    .center-hint-btn:active {
        background: #015488;
    }
    
    #wechat-no-info {
        width: 100%;
        line-height: 22px;
        font-size: 16px;

        #wechat-no {
            font-weight: bold;
        }

        #copy-user-wechat-no {
            margin-left: 10px;
            font-size: 14px;
            cursor: pointer;
            color: #0077bf;
        }
    }
    
    #wechat-remarks {
        color: #999999;
        width: 100%;
        line-height: 22px;
    }

    .wechat-qrcode-par {
        color: #999999;
        margin-bottom: 15px;
        margin-top: 6px;
        text-align: center;
        font-size: 12px;
    
        #wechat-qrcode {
            width: 240px;
            margin-top: 10px;
        }

        .wechat-qrcode-explain {
            margin-top: 7px;
        }
    }
}
</style>